import React, {Component, PropTypes} from "react";
import {
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
    ListView,
    AsyncStorage,
    RefreshControl,
    FlatList,
} from 'react-native';
import Toast, {DURATION} from 'react-native-easy-toast'
import Icon from 'react-native-vector-icons/Ionicons'
import Login from '../page/Login'

export default class ListViewTest extends Component {
    static propTypes = {
        data: PropTypes.array,
    }

    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows(this.props.data),
            isLoading: false,
            selected: false,
            isLogin: false,
            text: ''
        }
    }

    toSas(item, token) {
        this.props.navigation.navigate('Sas', {
            title: item.title,
            target: item.target,
            token: token
        })
    }

    toNative(item, token) {
        this.props.navigation.navigate('TreeList', {
            title: item.title,
            token: token,
            target: item.target
        })
    }

    toInfo(item, token) {
        if (item.name == 'myInfo') {
            this.props.navigation.navigate('Info', {title:'我的信息'})

        }else {
            AsyncStorage.clear()
        }
    }

    renderRow(item) {
        return <View key={item.id} style={styles.row}>
            <Icon style={styles.icon} name={item.icon} size={30} color={item.color ? item.color : "#7ed321"}/>

            <TouchableOpacity
                style={styles.item}
                onPress={() => {
                    console.log(this);
                    AsyncStorage.getItem('token', (err, ret) => {
                        if (!err) {
                            if (!!ret) {
                                switch (item.type) {
                                    case 'sas':
                                        this.toSas(item, ret)
                                        break
                                    case 'native':
                                        this.toNative(item, ret)
                                        break
                                    case 'info':
                                        this.toInfo(item, ret)
                                        break
                                    case 'work':
                                        this.toNative(item, ret)
                                        break
                                    default:
                                        this.props.navigation.navigate('Home')
                                }
                            } else {
                                this.props.navigation.navigate('Login')
                            }
                        } else {
                            this.toast.show(err, DURATION.LENGTH_LONG);
                        }
                    })
                }}
            >
                <Text style={styles.text}>{item.title}</Text>
            </TouchableOpacity>
        </View>
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.props.data}
                    renderItem={({item}) => this.renderRow(item)}
                />

                <Toast ref={toast => {
                    this.toast = toast
                }}/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "white",
        marginTop: 10
    },
    text: {
        fontSize: 16,
        color: "#000",
        paddingBottom: 5
    },
    row: {
        height: 55,
        flexDirection: "row",
        alignItems: "center",
    },
    line: {
        height: 1,
        backgroundColor: '#c8c7cc'
    },
    item: {
        borderBottomWidth: 1,
        borderBottomColor: '#c8c7cc',
        flex: 1
    },
    icon: {
        padding: 20,
        fontSize: 28
    }
})